<!--
 * @Author: gyc
 * @Date: 2020-05-21 10:07:56
 * @LastEditTime: 2020-08-25 17:20:05
 * @Description: Nuxt测试版
--> 
<template>
<div class="user-account">
    <div class="user-title">账号信息</div>
    <div class="user-account-item">注册时间:2020-5-30</div>
    <div class="user-account-item">最近访问时间:2020-5-30</div>
    <div class="user-account-item">访问天数:7天</div>
    <div class="user-account-item">注册时间:2020-5-30</div>
    <!--    <div class="userinfo-btn">
        <button @click="cancel">退出登录</button>
    </div>-->
</div>
</template>

<script>
export default {
    name: "userAccount",
    data() {
        return {};
    },
    methods: {
        cancel() {
            this.$axios.get("http://localhost:7001/logout");
            localStorage.removeItem("loginCode");
            this.$router.push("/");
        },
    },
};
</script>

<style lang="scss" scoped>
.user-account {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    // padding: 10px;
    background-color: white;
    align-items: flex-start;

    .user-title {
        display: flex;
        position: relative;
        width: 100%;
        padding-left: 20px;
        justify-content: flex-start;
        height: 45px;
        align-items: center;
        font-size: 18px;

        // border-bottom: 1px solid #eee;
        &::before {
            position: absolute;
            content: "";
            width: 4px;
            height: 18px;
            background-color: $gcolor;
            left: 10px;
            top: 12.4px;
            border-radius: 2px;
        }
    }

    .user-account-item {
        width: 100%;
        padding-left: 20px;
        padding-right: 20px;
        padding-top: 20px;
        letter-spacing: 2px;
    }

    .userinfo-btn {
        display: flex;
        width: 100%;
        height: auto;
        padding-top: 20px;
        align-items: center;
        justify-content: center;
        margin-top: 20px;

        button {
            width: 120px;
            height: 30px;
            outline: none;
            border: 0;
            background-color: red;
            color: white;
            cursor: pointer;
            transition: all 0.4s ease-in-out;
        }
    }
}
</style>
